import React from 'react'
import Songs from '@/assets/fonts/songs.svg'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/modules/RootState'
import { useNavigate } from 'react-router-dom'
import { returnArray } from '@/utils/checkKeyStorage'

function CollectMusic() {
  console.log('收藏内容更新')
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const musicList = useSelector((state:RootState) => state.musicList)
  const user = useSelector((state:RootState) => state.user)

  const gotoMusic = (item:any,index:number) =>{
    var query = {id:item.id,len:item.trackCount,index:index}
    navigate(`/mylovemusic?name=${item.name}&id=${item.id}`,{state:query})
  }

  return (
    <div>
        <ul>
          {
            user.userSubcount.createdPlaylistCount
            &&
            musicList.musicList.length
            &&
            musicList.musicList.slice(user.userSubcount.createdPlaylistCount,musicList.musicList.length).map((item,index)=>{
                return(
                  <li key={index} onClick={()=>gotoMusic(item,user.userSubcount.createdPlaylistCount+index)}>
                    <img src={Songs} alt="" />
                    <span>{item.name}</span>
                  </li>
                )
            })
          }
        </ul>
    </div>
  )
}

export default React.memo(CollectMusic)